<template>
    <div class="baseInfo">
      <vxe-table
        border
        stripe
        ref="tableRef"
        size="small"
        header-align="center"
        :row-config="rowConfig"
        :column-config="columnConfig"
        :data="tableData"
      >
        <vxe-column type="seq" width="70" align="center" fixed="left"></vxe-column>
        <vxe-column field="opType" show-overflow="title" align="center" title="单据类型？"></vxe-column>
        <vxe-column field="expressNo" show-overflow="title" align="center" title="物流单号"></vxe-column>
        <vxe-column field="remark" show-overflow="title" align="center" title="物流单是否打印？"></vxe-column>
        <vxe-column field="packageCode" show-overflow="title" align="center" title="箱号"></vxe-column>
        <vxe-column field="packageSeq" show-overflow="title" align="center" title="包裹号"></vxe-column>
        <vxe-column field="createTime" show-overflow="title" align="center" title="包裹数？"></vxe-column>
        <vxe-column field="expressCost" show-overflow="title" align="center" title="物流成本"></vxe-column>
        <vxe-column field="crossWeight" show-overflow="title" align="center" title="称重重量"></vxe-column>
      </vxe-table>
  
    </div>
  </template>
  
  <script>
    import {
      getPackageLogisticsInfo
    } from "@/api/mes/sales/print";
    export default {
      name: 'Package',
      props: {
        cellId: {
          type: String,
          default: ''
        },
      },
      watch: {
        cellId: {
          handler(val) {
            if (val && val !== 'add') {
              this.getList();
            } else {
              this.tableData = [];
            }
          },
          deep: true
        }
      },
      data() {
        return{
          tableData: [],
          selectGoodsDialogVisible: false,
          total: 0,
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          rowConfig: {
            keyField: '',
            isHover: true,
            isCurrent: true,
          },
          columnConfig: {
            resizable: true,
            align: 'center',
            headerAlign: 'center',
          },
          selectingRow: null, platformSelectingRow: null,
          platformSelectDialogVisible: false,
        }
      },
      methods: {
        getList() {
          // 这里应根据真实接口调整，暂用空实现，防止报错
          getPackageLogisticsInfo(this.cellId).then(response => {
            if(response.code === 200) {
              this.tableData = response.data;
            }
          });
        },
      }
  }
</script>

<style lang="scss" scoped>
.product-code-selectable {
  user-select: none;
  transition: color 0.2s;
}
.product-code-selectable:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>
  
  <style lang="scss" scoped>
  .baseInfo{
    &-header{
      margin-bottom: 10px;
    }
  }
  </style>